<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>login</title>
<link rel="stylesheet" type="text/css" href="${ctx}/static/back/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/back/css/demo.css" />
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="${ctx}/static/back/css/component.css" />
<!--[if IE]>
<script src="${ctx}/static/back/js/html5.js"></script>
<![endif]-->
</head>
<body>
		<div class="container demo-1">
			<div class="content">
				<div id="large-header" class="large-header">
					<canvas id="demo-canvas"></canvas>
					<div class="logo_box">
						<h3>欢迎登陆</h3>
						<form action="#" name="f" method="post" id="login_from">
							<div class="input_outer">
								<span class="u_user"></span>
								<input id="username" name=username class="text" style="color: #FFFFFF !important" type="text" placeholder="请输入账户">
							</div>
							<div class="input_outer">
								<span class="us_uer"></span>
								<input id="password" name="password" class="text" style="color: #FFFFFF !important; position:absolute; z-index:100;"value="" type="password" placeholder="请输入密码">
							</div>
							<!-- 验证码 -->
							<div class="input_outer">
								<span class="us_uer"></span>
								<input id="checkCode" name="checkCode" class="text" style="color: #FFFFFF !important; position:absolute; z-index:100;"value="" type="text" placeholder="请输入验证码">
							</div>
								<!-- 自动生成图片,点击方法，图片更换 ,进入到StudentCheckImgServlet页面 -->
								<img id="codeImg"  name="checkCodeSession" alt="" src="${ctx}/checkImg" onclick="refreshCode()"><br/>
						</form>
							<div class="mb2">
								<a class="act-but submit"   href="${ctx}/user/getRegisterPage.action" style="color: #FFFFFF">注册</a>
								<a class="act-but submit" href="javascript:;" onclick="submitFrom()" style="color: #FFFFFF">登录</a>
							</div>
					</div>
				</div>
			</div>
		</div><!-- /container -->
		<script src="${ctx}/static/back/js/TweenLite.min.js"></script>
		<script src="${ctx}/static/back/js/EasePack.min.js"></script>
		<script src="${ctx}/static/back/js/rAF.js"></script>
		<script src="${ctx}/static/back/js/demo-1.js"></script>
		
		<script src="${ctx}/static/back/jquery/jquery-1.11.1.js"></script>
		<script src="${ctx}/static/lib/layui/layui.js"></script>
		<script src="${ctx}/static/common/mylayer.js"></script>
		<script src="${ctx}/static/common/util.js"></script>
		
		<!-- layui必备 -->
		<script>
			//一般直接写在一个js文件中
			layui.use(['layer'], function(){
			  var layer = layui.layer;
			/*   layer.msg('Hello World'); */
			});
		</script> 
		
		<!-- 登陆验证 -->
		<script type="text/javascript">
			function submitFrom(){
				var username = $("#username").val();
				var password = $("#password").val();
				var checkCode = $('#checkCode').val();
				//用户名不为空
				if(util.isNull(username)){
					mylayer.errorMsg("用户名不能为空");
					return;
				}
				//用户名格式
				var pattrn = /^[0-9a-zA-Z]{4,8}$/;
				if(!pattrn.test(username)){
					mylayer.errorMsg("用户名格式不正确，请输入4-8位数字或字母");
					return;
				}
				//密码不为空
				if(util.isNull(password)){
					mylayer.errorMsg("密码不能为空");
					return;
				}
				//验证验证码
				if(util.isNull(checkCode)){
					mylayer.errorMsg("验证码不能为空");
					return;
				}
				
				//验证验证码，错误刷新验证码，正确提交表单
				$.ajax({
					url : "${ctx}/user/YZM.action",
					type : "post",
					dataType : "json",
					data : {"checkCode" : checkCode},
					success : function(resp){
						if(resp == false){
							mylayer.errorMsg("验证码错误，请重新输入");
							$("#codeImg").attr("src","${ctx}/checkImg?" + Math.random());
						} 
						if(resp == true){
							/* 正确提交表单 */
							//提交表单
							$.ajax({
								url : "${ctx}/user/login.action",
								type : "post",
								dataType : "json",
								data : $("#login_from").serialize(),
								success : function(resp){
									console.log(resp);
									if(resp.code == util.SUCCESS){//resp的状态==0
										mylayer.successUrl(resp.msg,"${ctx}/index.action");
									}else{
										mylayer.errorMsg(resp.msg);
									}
								}
							});
						/* 提交表单结束 */
						}
					} 
				});
			}
			
			/* 验证码 */
			function refreshCode(){
			/* 根据id找到图片，然后重定向到图片的地址，由于得更换图片，所以地址后加个随机数，保证两张图片不一样 */
			$("#codeImg").attr("src","${ctx}/checkImg?" + Math.random());
			}
		</script>
		
	</body>
</html>